<template>
    <div class="description">
        1、这里使用axias:"time"<br>
        2、拉取的mock数据<br>
    </div>
    <div class="item mt5">
        <div ref="echart1" class="echart1 fl"></div>
        <div ref="echart2" class="echart2 fr"></div>
        <div class="clr"></div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, onMounted, ref, markRaw } from 'vue';
import _ from "lodash";
import * as echarts from "echarts";
import axios from "axios";

defineProps({
    msg: {
        type: String,
        default: "hello1111111"
    }
})

const state = reactive({
    count: 0,
    echart1: null,
    echart2: null,
    ehcart1Ins: null as any,
    ehcart2Ins: null as any,
    visualMapLengnd: false
})

//必须toRefs处理后结构，否则失去响应性
const { echart1, echart2, visualMapLengnd } = toRefs(state);

const methods = {
    dataNum: 20,            //横轴数据量
    async getData() {
        const res = await axios("/api/data2");
        return res.data.data.record;

    },
    buildData(data) {
        let axiax = [],
            serise1 = [],
            serise2 = [],
            serise3 = [];

        data.sort((a, b) => {
            let start = new Date(a.datetime);
            let end = new Date(b.datetime);
            return start > end ? 1 : -1;
        });
        data.forEach(item => {
            let datetime = item.datetime;
            axiax.push(datetime);
            serise1.push([datetime, item.param1]);
            serise2.push([datetime, item.param2]);
            serise3.push([datetime, item.param3]);
        });

        return { axiax, serise1, serise2, serise3 };
    },
    async buildEchart(customOption = {}) {
        const data = await methods.getData();
        const { axiax, serise1, serise2, serise3 } = methods.buildData(data);;
        let option = {
            title: {
                text: "第一张折线图"
            },
            grid: {
                show: false,     //是否显示直角坐标系网格。  四周的边框
                width: "auto",
                containLabel: false,
                backgroundColor: "#eee",    //show:true时生效
            },
            legend: {},
            visualMap: [
                {
                    type: 'piecewise',
                    show: false,
                    dimension: 1,       //维度，serise中二位数据中每一项索引为1，就是数值;0是横轴的值;
                    seriesIndex: 0,//不指定则针对全部
                    pieces: [       //优先级没有serise中lineStyle来
                        {
                            lt: 10,
                            color: 'rgba(0, 0, 255, 0.2)'
                        },
                        {
                            gt: 10,
                            lt: 30,
                            color: 'rgba(255, 0, 0, 0.4)'
                        },
                        {
                            gt: 30,
                            color: 'rgba(0, 0, 255, 0.2)'
                        }
                    ]
                }
            ],
            tooltip: {
                show: true,
                trigger: 'axis',     //item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用    axis：坐标轴触发（柱状图，折线图）
            },
            xAxis: {
                name: "时间",
                type: 'time',
                // data: axiax,
                axisLine: {
                    show: true,
                    symbol: ["none", "arrow"],
                    symbolOffset: [0, 0]
                },
            },
            yAxis: {
                name: "个",
                type: 'value',
                axisLine: {
                    show: true,
                    symbol: ["none", "arrow"],
                    symbolOffset: [0, 0]
                },
            },
            series: [
                {
                    name: "图形1",
                    data: serise1,
                    type: 'line',
                    symbol: 'none',
                    // lineStyle: {    //优先级比visualMap高
                    //     color: '#5470C6',
                    //     // width: 3
                    // },
                },
                {
                    name: "图形2",
                    data: serise2,
                    type: 'line',
                    symbol: 'none',
                },
                {
                    name: "图形3",
                    data: serise3,
                    type: 'line',
                    symbol: 'none',
                },
                {
                    // 背景色
                    name: '',
                    type: 'line',
                    markLine: {
                        symbol: ['circle', 'none'],
                        label: { show: true },
                        data: [
                            { xAxis: "2022-06-12 15:00:00" },
                            { xAxis: "2022-10-12 15:00:00" }
                        ]       //横轴的值或者索引都可以
                    },
                    markArea: {
                        itemStyle: {
                            color: 'rgba(255, 0, 0, 0.1)'
                        },
                        data: [
                            [
                                {
                                    name: '区间1',
                                    xAxis: '2022-06-12 15:00:00',
                                    itemStyle: {
                                        color: "rgba(0, 0, 255, 0.3)"
                                    }
                                },
                                {
                                    xAxis: '2022-10-12 15:00:00',
                                }
                            ],
                        ]
                    }
                }
            ]
        };
        let OPTION = _.merge(option, customOption);

        console.log("%cOption：", "color:red",OPTION);
        state.ehcart1Ins.setOption(OPTION);
        state.ehcart2Ins.setOption(OPTION);
    },
};

onMounted(() => {
    state.ehcart1Ins = markRaw(echarts.init(echart1.value));
    state.ehcart2Ins = markRaw(echarts.init(echart2.value));

    state.ehcart1Ins.group = "group1";
    state.ehcart2Ins.group = "group1";

    echarts.connect([state.ehcart1Ins, state.ehcart2Ins]);
    methods.buildEchart();

});
</script>

<style lang="scss" scoped>

.echart1,
.echart2 {
    width: 50%;
    height: 300px;
}

.action {
    display: flex;
    justify-content: center;
}
</style>